<template>
    <q-page>
        <!-- <q-list class="search-bar q-pb-md" no-border>
            <q-item>
                <q-radio class="q-mr-md" keep-color v-model="days" val="3" label="3天" color="primary" />
                <q-radio class="q-mr-md" keep-color v-model="days" val="7" label="7天" color="primary" />
                <q-radio class="q-mr-md" keep-color v-model="days" val="15" label="15天" color="primary" />
                <q-radio class="q-mr-md" keep-color v-model="days" val="30" label="30天" color="primary" />
            </q-item>
        </q-list> -->
        <!-- <q-card>
          <q-search 
            icon="mdi-file-find" 
            class="full-width no-shadow" 
            inverted-light 
            color="grey-2"
            placeholder="可通过文章名、Tag搜索" 
            autofocus="true"
            clearable
            :value="filter"
            @input="filterResult" 
            @clear="filterResult('')" 
            @change="filterResult" 
        />
        </q-card> -->
        <div class="audioPlayer">
            <audio v-if="!!currenItem.mid" :src="currenItem.playUrl" autoplay controls />
            <span>{{currenItem.title}}</span>
        </div>
        <q-infinite-scroll :handler="loadMoreBgm" ref="scroll">
            <q-list separator :class="$q.platform.is.mobile?'':'row'">
                <q-item 
                    v-for="(item) in this.list" 
                    :key="item.mid"
                    :class="'bgmItem ' + (currenItem.mid == item.mid ? 'bg-deep-orange-1' : '')"
                >
                    <q-item-side top class="bgmCover" :image="item.cover" 
                    @click.native="onClickItem(item)">
                        <q-spinner-audio v-if="currenItem.mid == item.mid" />
                        <q-icon v-else name='play_arrow' />
                        <span class="duration">00:{{('0'+item.duration).slice(-2)}}</span>
                    </q-item-side>
                    <q-item-main>
                        <q-item-tile>{{item.title}}</q-item-tile>
                        <q-item-tile sublabel="">【{{item.author}}】</q-item-tile>
                        <q-item-tile sublabel="">
                            <q-chip dense>{{formatNumbers(item.userCount)}}</q-chip>
                        </q-item-tile>
                        <!-- <q-item-side class="q-mt-sm" right><q-btn color="secondary" outline dense>相关视频</q-btn></q-item-side> -->
                    </q-item-main>
                </q-item>
            </q-list>
        </q-infinite-scroll>
    </q-page>
</template>

<script>
export default {
    name: 'PageOfficalAccount',
    data() {
        return {
            list: [],
            days: 3,
            articals: [],
            limit: 50,
            filter: '',
            showUnModified: false,
            accounttags: [],
            currenItem: {}
        }
    },
    mounted(){
        this.$api.ui.pageTitle = '热门抖音BGM'
        // this.loadModel(this.$route.params.id);
        this.$api.ui.pageBackBtn = () => {
            this.$router.push('/offical/accounts');
        }
        // this.getDouyinBgms()
        // this.$api.offical.loadAllTags()
    },
    methods: {
        getDouyinBgms(){
            this.$api.douyin.getBgms( 1, data => {
                console.log( 'data:::', data )
                this.list = [...data]
                
            }) 
        },
        formatNumbers( num ){
          let number = '' + num
          let showStr = ''
          if ( number > 9999  ){
              showStr = Math.floor(number /  10000) + 'w+'
          } else if ( number > 999 && number < 10000){
              showStr = Math.floor(number / 1000 ) + 'k+'
          } else {
              showStr = number
          }

          return showStr
        },
        loadMoreBgm(page, done){
            this.$api.douyin.getBgms( page, data => {
                this.list.push( ...data )
                done( data.length < this.limit )
            })
        },
        onClickItem( item ){
            let { playUrl, title } = item
            console.log('playUrl:::', playUrl )
            this.currenItem = {...item}
        }
    }
}
</script>

<style>
.accoutAvatar{
    height: 40px;
    width: 40px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 200px;
    border-radius: 40px;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.6 );
}
.tags_adder{
    display: inline-block;
}
.tags_adder div{
    display: inline-block;
}
.tags_adder div input{
    width: 50px!important;
}
.bgmItem{
    width: 50%;
}
.bgmCover{
    position: relative;
    width: 100px;
    height: 100px;
}
.bgmCover .q-item-image{ 
    width: 100%;
    min-width: 0;
}
.bgmCover:before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0,0,0,0.4);
}
.bgmCover .q-icon{
    position: absolute;
    z-index: 10;
    font-size: 40px;
    color: #fff;
    left: 50%;
    top: 50%;
    margin: -20px 0 0 -20px;
}
.bgmCover .q-spinner{
    position: absolute;
    z-index: 10;
    font-size: 40px;
    color: #fff;
    left: 50%;
    top: 50%;
    margin: -20px 0 0 -20px;
}
.bgmCover .duration{
    position: absolute;
    bottom: 5px;
    right: 5px;
    z-index: 20;
    font-size: 10px;
    color: #fff;
}
.bgmCover img{
    vertical-align: bottom;
}
.audioPlayer{
    position: fixed;
    bottom: 60px;
    left: 50%;
    z-index: 200;
    text-align: center;
    background: #f0f0f0;
    transform: translate( -50%, 0);
}
.audioPlayer span{
    display: block;
    text-align: center;
    margin: -15px 0 10px;
    position: relative;
    font-size: 14px;
}
</style>